<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/vue.min.js"></script>
    <!-- 引入样式 -->
    <link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style> html, body, #app {
        height: 100%;
    } </style>
</head>
<body>
<div id="app" style="display: flex; flex-direction: column; width: 90%; margin:auto; height: calc(100% - 50px)">
    <h4 style="flex: none;display: flex; align-items: center; justify-content: space-between">
        历年同月销量柱状图
        <form style="display: flex; align-items: center; font-weight: normal;" v-for="year in years" v-model="years">
            <span><input :value="year" type="checkbox">{{year}}年</span>
            <select @change="query" style="width: 50px;margin-left: 20px" v-model="month">
                <option :value='m < 10 ? "0" + m : m' v-for="m in 12">{{m < 10 ? "0" + m : m}}月</option>
            </select>
        </form>
    </h4>
    <div id="container" style="flex:auto"></div>
</div>
<script type="text/javascript">
    var v = new Vue({
        el: "#app",
        data: {
            years: [],
            month: "01",
            sales: [],

        },
        created() {
            axios.get("year.s").then(res => {
                this.years = res.data.map(row => row.year);
                this.query();
            })
        },
        methods: {
            query() {
            	var url = "Zzt.s?"
            	var p ="";
            	this.years.forEach(year=>{
            		p =+ "year=" + year +"&";
				});
            	url += "month" +this.month;
                axios.get(url, {
                }).then(res => {
                    this.sales = res.data.map(row => row.sale);

                    var dom = document.getElementById('container');
                    var myChart = echarts.init(dom, null, {
                        renderer: 'canvas',
                        useDirtyRect: false
                    });
                    option = {
                        xAxis: {
                            type: 'category',
                            data: this.years.map(years => years + "年"),
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: this.sales,
                                type: 'bar',
                                showBackground: true,
                                backgroundStyle: {
                                    color: 'rgba(180, 180, 180, 0.2)'
                                }
                            }
                        ]
                    };
                    if (option && typeof option === 'object') {
                        myChart.setOption(option);
                    }
                    window.addEventListener('resize', myChart.resize);
                })
            }
        }
    })

</script>
</body>
</html>

<style>
    html,
    body,
    #app {
        height: 100%;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        color: #333;
    }

    #app {
        /* padding: 50px; */
        box-sizing: border-box;
    }
</style>
